<template>
  <div id="largescreen" :style="largescreenPcStyle">

    <el-row :gutter="10" style="padding: 10px;height: calc(100% - 60px);">
      <el-col :lg="12" :md="12" :sm="24" :xs="24">

        <china
            v-model:area-code="areaCode"
            v-model:area-level="areaLevel"
            v-model:area-name="areaName"
            v-model:map-name-list="mapNameList"
            v-model:map-code-list="mapCodeList"
            :area-statistic="areaStatistic"
        />

      </el-col>

    </el-row>
  </div>
</template>

<script setup lang="ts">
import {ref, watch, onMounted, CSSProperties} from 'vue'
import China from "@/views/station-mangement/map/components/china.vue";

// Reactive data
const areaCode = ref('000000000000') // 当前用的areaCode
const areaLevel = ref(0) // 当前用的areaCode
const areaName = ref('china') // 当前用的areaName
const mapNameList = ref<string[]>([]) // 当前地图上的地区名字
const mapCodeList = ref<string[]>([]) // 当前地图上的地区Code
const largescreenPcStyle = ref<CSSProperties>({

  top: '0',
  left: '0',
  width: '100%',
  height: '100%',
});
const areaStatistic = ref([]) // 测试

// Methods
const isMobile = () => {
  // Mobile detection logic - you may need to implement this based on your project
  return window.innerWidth <= 768
}

const setAreaName = () => {
  if (areaName.value === '中央本级') {
    areaName.value = 'china'
  }
}

// Watchers
watch(areaCode, (newVal) => {
  // Handle areaCode changes
}, { deep: true })

// Lifecycle
onMounted(() => {
  setAreaName()
})
</script>

<style scoped lang="scss">
::v-deep#largescreen {
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
  padding: 0;

  .el-col {
    height: 100%;
    position: relative;

    .date-range {
      position: absolute;
      right: 5px;
      z-index: 9;

      .el-date-editor {
        background: transparent;
        border-color: rgb(0, 186, 255);
        width: 250px;

        .el-icon-date {
          color: #fff;
        }

        .el-range-separator {
          color: #fff;
        }

        .el-range__close-icon {
          color: #fff;
        }

        .el-range-input {
          background: transparent;
          color: #fff;
        }
      }
    }

    .map-item-amounts {
      position: absolute;
      z-index: 9;
      left: 10px;
      top: 30px;
      color: #fff;
      font-size: 16px;
      color: #24CFF4;
    }
  }

  .el-carousel {
    height: calc(33.3%);
    //margin-bottom: 10px;
    .el-carousel__container {
      height: 100%;
    }

    .el-carousel__indicator--horizontal {
      padding: 3px;
    }
  }
}
</style>
